<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>角色管理</span>
        <div class="card-header-btn">
          <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        </div>
      </div>
    </template>
    <div class="role-table">
      <el-table :data="roles" stripe style="width: 100%" table-layout="fixed">
        <el-table-column prop="roleId" label="编号" />
        <el-table-column prop="roleName" label="名称" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="权限设置" placement="top">
              <el-button
                type="success"
                :icon="Key"
                circle
                @click="handleAuth(scope.row, scope.$index)"
              />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="角色编辑" placement="top">
              <el-button
                type="primary"
                :icon="Edit"
                circle
                @click="handleEdit(scope.row, scope.$index)"
              />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除角色" placement="top">
              <el-button
                type="danger"
                :icon="Delete"
                circle
                @click="handleDelete(scope.row, scope.$index)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="remarks" label="备注" />-->
        <el-table-column type="expand">
          <template #default="scope">
            <div class="role-remarks">{{ scope.row.remarks }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="card-footer">欢迎来到角色管理页面@YTH科技有限公司</div>
    </template>
  </el-card>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRoleStore } from '@/stores/role/role.js'
import { storeToRefs } from 'pinia'
import { Delete, Edit, Key } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const roleStore = useRoleStore()
const { roles, dialogFormVisible } = storeToRefs(roleStore)

const handleAuth = (row, index) => {
  // console.log(row)
  // console.log(index)
  roleStore.setRole(row)
  roleStore.setCurrentIndex(index)
  roleStore.setDrawerVisible(true)
}

const handleEdit = (row, index) => {
  // console.log(row)
  // console.log(index)
  roleStore.setRole(row)
  roleStore.setCurrentIndex(index)
  roleStore.setDialogFormVisible(true)
}

const handleDelete = (row, index) => {
  ElMessageBox.confirm('你的操作将会删除该角色，是否继续？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // console.log(row)
      roleStore.setCurrentIndex(index)
      roleStore.deleteRole(row.roleId)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消'
      })
    })
}

onMounted(() => {
  roleStore.getRoles()
})
</script>

<style lang="scss" scoped>
.el-card {
  width: 100%;
  height: 100%;

  .card-header {
    font-size: 25px;
    font-weight: bold;
    .card-header-btn {
      float: right;
      margin-right: 40px;
    }
  }

  .card-footer {
    font-size: 20px;
    text-align: right;
    color: #a1a1a5;
    margin-top: 10px;
  }

  .role-table {
    .el-table {
      height: 500px;
      .el-table-column {
        font-size: 18px;
      }
    }
    .role-remarks {
      min-height: 8px;
      min-width: 80%;
      margin-left: 50px;
      margin-right: 10px;
      font-size: 15px;
      color: #a1a1a5;
    }
  }
}
</style>
